<template>
  <div>
    <div class="gropuContent" v-if="defaultRemoteArr.length > 0">
      <div v-for="(group, index) in defaultRemoteArr" :key="`group_${index}`">
        <div class="group_item">
          <div class="c_left">
            <img src="" alt="" />
            <span>{{ group.remoteCategoryName }}</span>
            <span>{{ `(${group.members.length})` }}</span>
          </div>
          <div class="c_right">
            <button @click="removeGroup(group.id)">x</button>
            <button
              @click="
                boardFlag = !boardFlag;
                type = 2;
                update_id = group.id;
              "
            >
              修改
            </button>
            <button @click="addMember(group.id)">添加成员</button>
          </div>
        </div>
        <div v-for="(member, idx) in group.members" :key="`member_${idx}`">
          <span>{{ member.remoteMemberName }}</span
          ><button @click="removeMember(member.remoteMemberId)">X</button>
        </div>
      </div>
    </div>
    <div class="add" v-else>暂无联系人,点击添加</div>
    <div
      class="addGroup"
      title="添加分组"
      @click="
        boardFlag = !boardFlag;
        type = 1;
      "
    >
      +
    </div>
    <div v-if="boardFlag">
      <input type="text" placeholder="请输入分组名称" v-model="groupName" />
      <input type="text" placeholder="请输入分组简介" v-model="groupRemark" />
      <button @click="addGroup">确定</button>
      <button @click="boardFlag = false">取消</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
  updateGroup,
  removeGroup,
  removeMember,
  getGroup,
} from "@/api/remoteMember";
export default {
  data() {
    return {
      boardFlag: false,
      groupName: "",
      groupRemark: "",
      type: 0, //1：新增分组，2：修改分组
      update_id: "", //当前点击的需要修改的分组的id
    };
  },
  props: ["getDefaultRemoteArr"],
  computed: {
    ...mapState(["defaultRemoteArr", "myInfo"]),
  },
  methods: {
    addGroup() {
      // http://172.16.47.234:12000/remote/group/modify?remoteCategoryName=小组1&remoteCategoryRemark=我也不知道干什么的&createBy=666666&id=6f445d95-c881-4fd8-acb4-258388b9c288
      let params = {};
      if (this.type == 1) {
        //新增分组
        params = {
          remoteCategoryName: this.groupName,
          remoteCategoryRemark: this.groupRemark,
          createBy: this.myInfo.id,
        };
      } else if (this.type == 2) {
        //修改分组
        params = {
          remoteCategoryName: this.groupName,
          remoteCategoryRemark: this.groupRemark,
          createBy: this.myInfo.id,
          id: this.update_id,
        };
      }
      updateGroup(params)
        .then((res) => {
          console.log(res, "成功");
          this.getDefaultRemoteArr();
        })
        .catch((error) => {
          console.log(error, "失败");
        });
      this.boardFlag = false;
    },
    updateGroup() {
      updateGroup({
        remoteCategoryName: "zk测试分组1第二次",
        remoteCategoryRemark: "分组一111122222111111",
        createBy: this.myInfo.id,
        id: "cd57d169-2f51-4a8c-98d7-02b7aa1f21e0",
      })
        .then((res) => {
          console.log(res, "成功");
        })
        .catch((error) => {
          console.log(error, "失败");
        });
    },
    removeGroup(groupId) {
      removeGroup({
        remoteCategoryId: groupId,
      })
        .then((res) => {
          console.log(res, "成功");
          this.getDefaultRemoteArr();
        })
        .catch((error) => {
          console.log(error, "失败");
        });
      removeGroup("");
    },
    addMember(groupId) {
      this.$emit("addMember", groupId);
    },
    removeMember(memberId) {
      removeMember({
        id: memberId,
      })
        .then((res) => {
          console.log(res, "成功");
          this.getDefaultRemoteArr();
        })
        .catch((error) => {
          console.log(error, "失败");
        });
    },
    getGroup() {
      console.log(this.defaultRemoteArr);
      getGroup({
        userId: this.myInfo.id,
      })
        .then((res) => {
          console.log(res, "成功");
        })
        .catch((error) => {
          console.log(error, "失败");
        });
    },
  },
};
</script>
<style lang="less" scoped>
.group_item {
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.add {
  cursor: pointer;
}
.addGroup {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  position: fixed;
  right: 0;
  bottom: 0;
}
</style>
